<template>
  <div class="course">
    <h3 class="title">目录管理</h3>
    <div class="toolbar">
      <el-button type="danger" icon="el-icon-plus" size="small" @click="$router.push('catalog/add')">添加</el-button>
      <el-form size="small" :model="searchForm" inline>
        <el-form-item>
          <el-select v-model="searchForm.course_id" placeholder="课程筛选">
            <el-option v-for="course in courses" :key="course.id" :value="course.id" :label="course.title" />
            <el-option value="" label="全部" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="课程目录名称" v-model="searchForm.name" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-search" type="primary" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <xu-table :data="tableData" :options="tableOptions" :pager="pager">
      <template slot="name" slot-scope="{ row }">
        <el-tooltip :content="row.name">
          <span>{{ row.name }}</span>
        </el-tooltip>
      </template>
      <template slot="course" slot-scope="{ row }">
        <el-tooltip :content="row.course.title">
          <span>{{ row.course.title }}</span>
        </el-tooltip>
      </template>
      <template slot="video" slot-scope="{ row }">
        {{ row.videos.length }} 个
      </template>
    </xu-table>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import table from '../../../mixins/table'
import { CatalogActionsEnum } from '../../../_/vue/store/catalog'
import { CourseActionsEnum } from '../../../_/vue/store/course'
export default {
  mixins: [table],
  data () {
    return {
      searchForm: {
        name: '',
        course_id: ''
      },
      tableOptions: [
        { attrs: { label: '目录名称', prop: 'name' } },
        { attrs: { label: '所属课程', prop: 'course' } },
        { attrs: { label: '视频数量', prop: 'video', width: '120px', align: 'center' } },
        {
          attrs: { label: '操作', prop: 'opt', width: '140px', align: 'center' },
          buttons: [
            { label: '编辑', icon: 'el-icon-edit', type: 'primary', click: ({ row }) => this.$router.push({ path: 'catalog/add', query: { id: row.id } }) },
            {
              label: '删除',
              icon: 'el-icon-delete',
              type: 'popover',
              click: ({ row }) => {
                this.delete({ ids: [row.id] })
                this.getData()
              }
            }
          ]
        }
      ],
      courses: []
    }
  },
  methods: {
    ...mapActions({
      list: CatalogActionsEnum.LIST,
      delete: CatalogActionsEnum.DELETE,
      courseList: CourseActionsEnum.SELECT
    })
  },
  async mounted () {
    const { data } = await this.courseList()
    this.courses = data
  }
}
</script>
